<template>
    <div class="card flex-container">
      <div class="icon-item" @click="navigateTo('/finance')" title="理财">
        <img class="btn-img" src="./assets_page3/pig.svg" />
        <span>理财</span>
      </div>
      <div class="icon-item" @click="navigateTo('/fund')" title="基金">
        <img class="btn-img" src="./assets_page3/jijin.svg" />
        <span>基金</span>
      </div>
      <div class="icon-item" @click="navigateTo('/risk-evaluation')" title="风险评估">
        <img class="btn-img" src="./assets_page3/fengxian.svg" />
        <span>风险评估</span>
      </div>
      <div class="icon-item" @click="navigateTo('/more')" title="更多">
        <img class="btn-img" src="./assets_page3/more.svg" />
        <span>更多</span>
      </div>
    </div>
  </template>
  
  <script>
  export default {
    methods: {
      navigateTo(page) {
        this.$router.push(page);
      },
    },
  };
  </script>
  
  <style scoped>
  .flex-container {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
  }
  
  .icon-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    cursor: pointer;
    margin: 10px;
  }
  
  .btn-img {
    width: 50px; /* 根据需要调整大小 */
    height: auto;
  }
  </style>